﻿{% extends 'base.html' %}
{% block content %}
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body" style="padding-top: 40px;">
                <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
                    <div carousel-item>

                        <div>
                            <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">学员ID:</label>
                                    <div class="layui-input-block">
                                        <input type="text" placeholder="请填写入学员ID" class="layui-input" lay-verify="number" required />

                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">实操次数:</label>
                                    <div class="layui-input-block">
                                        <input type="number" placeholder="请填写实操人员个人信息" value="" class="layui-input" lay-verify="number" required>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">实验类目:</label>
                                    <div class="layui-input-block">
                                        <select lay-verify="required">
                                            <option value="1" selected>Linux必杀技</option>
                                            <option value="2">shell编程</option>
                                            <option value="3">nginx生产部署</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">实验目的:</label>
                                    <div class="layui-input-block">
                                        <select lay-verify="required">
                                            <option value="1" selected>实验目的</option>
                                            <option value="2">部署</option>
                                            <option value="3">熟练度</option>
                                            <option value="4">深入</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">备注说明:</label>
                                    <div class="layui-input-block">
                                        <textarea placeholder="需求备注" value="" class="layui-textarea"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" lay-submit lay-filter="formStep">
                                            &emsp;下一步&emsp;
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <div>
                            <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">学员ID:</label>
                                    <div class="layui-input-block">
                                        <div class="layui-form-mid layui-word-aux">12345</div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">剩余实验次数:</label>
                                    <div class="layui-input-block">
                                        <div class="layui-form-mid layui-word-aux"><a href="#" style="color: #00b5f9"> 3次</a>（总次数：5，已使用：2次）</div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">知识点:</label>
                                    <div class="layui-input-block">
                                        <div class="layui-form-mid layui-word-aux">
                                            <span style="font-size: 14px;color: #333;"><a href="#" style="color: #00b5f9">xxx核心知识</a></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">配置文件:</label>
                                    <div class="layui-input-block">
                                        <div class="layui-form-mid layui-word-aux"><a href="#" style="color: #00b5f9">xxx生产配置文件</a></div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">操作手册:</label>
                                    <div class="layui-input-block">
                                        <div class="layui-form-mid layui-word-aux"><a href="https://kdocs.cn/l/cdYbaZUND5lz" target="_blank" style="color: #00b5f9">xxx实操指导</a></div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">备注说明:</label>
                                    <div class="layui-input-block">
                                        <div class="layui-form-mid layui-word-aux">备注说明</div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
                                        <button class="layui-btn" lay-submit lay-filter="formStep2">
                                            &emsp;下一步 [确认环境]&emsp;
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <div>
                            <div style="text-align: center;margin-top: 30px;">
                                <table class="layui-table" style="width: 400px;margin: auto" >
                                    <tr>
                                        <td>机器</td>
                                        <td>用户名</td>
                                        <td>密码</td>
                                    </tr>
                                    <tr>
                                        <td>10.206.0.32</td>
                                        <td>root</td>
                                        <td>zbl@090108</td>
                                    </tr>
                                    <tr>
                                        <td>10.206.0.21</td>
                                        <td>root</td>
                                        <td>zbl@090108</td>
                                    </tr>
                                </table>
                                <br>
                                <i class="layui-icon layui-circle"
                                   style="color: white;font-size:25px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 50px;">&#xe605;</i>
                                <div style="font-size: 24px;color: #333;font-weight: 400;margin-top: 30px;">
                                    Let you go!
                                </div>

                                <div style="font-size: 14px;color: #666;margin-top: 20px;">请开始你的xxx实验</div>
                            </div>
                            <div style="text-align: center;margin-top: 50px;">
                                <button class="layui-btn pre">上一步</button>
                                <button class="layui-btn layui-btn-primary"><a href="{{ url_for('webssh') }}" target="_blank">开始实验</a></button>
                                <button class="layui-btn" lay-submit lay-filter="formStep2">提交实验结果</button>
                            </div>
                        </div>


                        <div style="text-align: center">
                            <div style="text-align: center;margin-top: 20px;">
                                <div class="layui-form-item"  style="margin-left: 80px">
                                    <label class="layui-form-label">问题反馈及自我评价:</label>
                                    <div class="layui-input-block">
                                        <textarea placeholder="实验反馈" value=""  style="width: 500px;" class="layui-textarea"></textarea>
                                    </div>
                                </div>
                                <div class="layui-upload" style="margin-left: 100px" >
                                      <button type="button" style="float:left;" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
                                      <div class="layui-upload-list" style="max-width: 800px;">
                                        <table class="layui-table">
                                          <colgroup>
                                            <col>
                                            <col width="150">
                                            <col width="260">
                                            <col width="150">
                                          </colgroup>
                                          <thead>
                                            <tr><th>文件名</th>
                                            <th>大小</th>
                                            <th>上传进度</th>
                                            <th>操作</th>
                                          </tr></thead>
                                          <tbody id="demoList"></tbody>
                                        </table>
                                      </div>
                                      <button type="button"  style="float: left" class="layui-btn" id="testListAction">开始上传</button>
                                    </div>




                            </div>
                            <div style="text-align: center;margin-top: 50px;">
                                <button class="layui-btn pre">上一步</button>
                                <button class="layui-btn layui-btn-primary"><a href="#" target="_blank">完成实验</a></button>
                            </div>
                        </div>



                    </div>
                </div>
                <hr>
                <div style="color: #666;margin-top: 30px;margin-bottom: 40px;padding-left: 30px;">
                    <h3>指导中心</h3>
                    <h4>技术理论说明</h4>
                    <p>如果需要，这里可以放一些关于技术的要点说明。</p>
                    <h4>常见问题记录</h4>
                    <p>如果需要，这里可以放一些关于实操的常见问题说明。</p>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <link href="../static/layui/css/layui.css" rel="stylesheet" />
    <link href="../static/step-lay/step.css" rel="stylesheet">
    <script src="../static/layui/layui.js"></script>
    <script src="../static/step-lay/step.js"></script>
    <script>
        layui.config({
            base: 'step-lay/'
        }).use(['form', 'step'], function () {
            var $ = layui.$
                , form = layui.form
                , step = layui.step;

            step.render({
                elem: '#stepForm',
                filter: 'stepForm',
                width: '100%', //设置容器宽度
                stepWidth: '750px',
                height: '500px',
                stepItems: [{
                    title: '填写实操者信息'
                }, {
                    title: '知识点概述复习'
                }, {
                    title: '实验环境确认'
                }, {
                    title: '提交实验结果'
                }]
            });


            form.on('submit(formStep)', function (data) {
                step.next('#stepForm');
                return false;
            });

            form.on('submit(formStep2)', function (data) {
                step.next('#stepForm');
                return false;
            });

            $('.pre').click(function () {
                step.pre('#stepForm');
            });

            $('.next').click(function () {
                step.next('#stepForm');
            });
        })
    </script>

<script>
layui.use(['upload', 'element', 'layer'], function() {
    var $ = layui.jquery
        , upload = layui.upload
        , element = layui.element
        , layer = layui.layer;

    //演示多文件列表
    var uploadListIns = upload.render({
        elem: '#testList'
        , elemList: $('#demoList') //列表元素对象
        , url: 'https://httpbin.org/post' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
        , accept: 'file'
        , multiple: true
        , number: 3
        , auto: false
        , bindAction: '#testListAction'
        , choose: function (obj) {
            var that = this;
            var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
            //读取本地文件
            obj.preview(function (index, file, result) {
                var tr = $(['<tr id="upload-' + index + '">'
                    , '<td>' + file.name + '</td>'
                    , '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>'
                    , '<td><div class="layui-progress" lay-filter="progress-demo-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
                    , '<td>'
                    , '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                    , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                    , '</td>'
                    , '</tr>'].join(''));

                //单个重传
                tr.find('.demo-reload').on('click', function () {
                    obj.upload(index, file);
                });

                //删除
                tr.find('.demo-delete').on('click', function () {
                    delete files[index]; //删除对应的文件
                    tr.remove();
                    uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                });

                that.elemList.append(tr);
                element.render('progress'); //渲染新加的进度条组件
            });
        }
        , done: function (res, index, upload) { //成功的回调
            var that = this;
            //if(res.code == 0){ //上传成功
            var tr = that.elemList.find('tr#upload-' + index)
                , tds = tr.children();
            tds.eq(3).html(''); //清空操作
            delete this.files[index]; //删除文件队列已经上传成功的文件
            return;
            //}
            this.error(index, upload);
        }
        , allDone: function (obj) { //多文件上传完毕后的状态回调
            console.log(obj)
        }
        , error: function (index, upload) { //错误回调
            var that = this;
            var tr = that.elemList.find('tr#upload-' + index)
                , tds = tr.children();
            tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
        }
        , progress: function (n, elem, e, index) { //注意：index 参数为 layui 2.6.6 新增
            element.progress('progress-demo-' + index, n + '%'); //执行进度条。n 即为返回的进度百分比
        }
    });
});
</script>
{% endblock %}

